<template>
    <div id="CompetitionRanking">
        <!-- 主要区域 -->
        <div class="major-areas">
            <div v-if="true" class="jx-content" id="scrollcontent">
                <div class="major-header">
                    <div class="courseName">
                        <el-input
                            v-model="searchTxt.info"
                            placeholder="请输入选手账号/姓名"
                        ></el-input>
                        <el-input
                            v-if="geamType == 2"
                            v-model="searchTxt.groupName"
                            placeholder="请输入队伍名称"
                        ></el-input>
                        <div class="search-button" @click="serachSomething">
                            搜索
                        </div>
                    </div>
                    <div class="btn-group">
                        <div class="button-style" @click="dataDown">
                            数据下载
                            <div class="el-icon-download"></div>
                        </div>
                    </div>
                </div>
                <!-- 任务列表 -->
                <el-table
                    class="chapter-info-table"
                    :data="tableData"
                    :span-method="objectSpanMethod"
                    style="width: 100%"
                    tooltip-effect="dark"
                    id="el-table"
                >
                    <el-table-column
                        type="index"
                        label="排名"
                        width="55"
                    ></el-table-column>
                    <el-table-column
                        v-if="geamType == 2"
                        prop="groupName"
                        label="参赛队伍"
                    ></el-table-column>
                    <el-table-column
                        v-if="geamType == 2"
                        prop="teacherName"
                        label="指导老师"
                        width="90"
                    >
                        <template slot-scope="scope">
                            <el-tooltip
                                v-if="scope.row.teacherPhone"
                                effect="light"
                                :content="
                                    scope.row.teacherName
                                    ? `${scope.row.teacherName}：${scope.row.teacherPhone}`
                                    : `${scope.row.teacherPhone}`
                                "
                                placement="top"
                            >
                                <div class="table-item">
                                    {{ scope.row.teacherName || '-'}}
                                </div>
                            </el-tooltip>
                            <div class="table-item" v-else>
                                {{ scope.row.teacherName || '-'}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="score"
                        label="成绩"
                    ></el-table-column>
                    <el-table-column label="选手姓名" prop="name"></el-table-column>
                    <el-table-column label="专业" prop="major"></el-table-column>
                    <el-table-column label="班级" prop="className"></el-table-column>
                    <el-table-column
                        prop="subTime"
                        label="提交时间"
                        width="180"
                    ></el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="{ row }">
                            <el-button
                                type="text"
                                size="small"
                                @click="Adjustment(row)"
                                >调整</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div id="topic-models" v-else>暂无信息</div>
        </div>
        <el-dialog
            :title="`请输入分数(当前竞赛最大分值为${totleScore}分)`"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
        >
            <el-input v-model="scoreData.score" @input="checkInput"></el-input>
            <div class="yes-no">
                <div class="yes-no-button" @click="dialogVisible = false">
                    取消
                </div>
                <div class="yes-no-button" @click="saveScore">确认</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    TeamRanking,
    PersonalRanking,
    RankingDataDown,
    RankingScoreSet,
    getCourseChatperTask,
    getTaskListCP,
} from "@/api/competitionPlatform";
export default {
    name: "CompetitionRanking",
    data() {
        return {
            courseId: "",
            //搜索时输入的姓名或者账号
            searchTxt: {
                groupName: "",
                info: "",
            },
            //排名数据列表
            tableData: [],
            //比赛类型
            geamType: 0,
            //调整分数
            scoreData: {
                number: "",
                score: 0,
            },
            totleScore: 0,
            // 开关------------------------start
            //调整分数弹窗开关
            dialogVisible: false,
            // 开关------------------------end
        };
    },
    created() {
        this.courseId = this.$localstorage.getLocalStorage("setCourseId");
        this.geamType = this.$localstorage.getLocalStorage("gameType");
        //获取排名信息
        this.getRankingInfo();
        // 获取任务列表
        this.getTaskList();
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (![4, 5, 6].includes(columnIndex) && this.geamType == 2) {
                if (row.rowNumber === 0) {
                    return {
                        rowspan: row.playerVOList.length,
                        colspan: 1,
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    };
                }
            }
        },
        checkInput(value) {
            value = ("" + value).replace(/[^\d]/g, "");
            if (value > this.totleScore) {
                value = this.totleScore;
            }
            this.scoreData.score = value;
        },
        //获取排名信息
        getRankingInfo() {
            if (this.geamType == 2) {
                TeamRanking(this.courseId, this.searchTxt).then((res) => {
                    if (res.code == 200) {
                        // this.tableData = res.data;
                        const records = res.data;
                        const arr = [];
                        records.forEach((item, index) => {
                            item.playerVOList.forEach((subItem, subIndex) => {
                                subItem.rowNumber = subIndex;
                                const newObj = { ...item, ...subItem };
                                arr.push(newObj);
                            });
                        });
                        this.tableData = arr;
                    }
                });
            } else {
                PersonalRanking(this.courseId, this.searchTxt).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data;
                    }
                });
            }
        },
        // 获取任务列表
        getTaskList() {
            getTaskListCP(this.courseId)
                .then((res) => {
                    if (res.code == "200") {
                        res.data.forEach((item) => {
                            this.totleScore += item.score;
                        });
                    } else {
                        this.$message.error("任务总分获取失败");
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //搜索
        serachSomething() {
            this.getRankingInfo();
        },
        //调整分数
        Adjustment(row) {
            this.scoreData.score = row.score;
            this.scoreData.number = row.number;
            this.dialogVisible = true;
        },
        saveScore() {
            RankingScoreSet(this.courseId, this.scoreData).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "修改成功",
                    });
                    this.getRankingInfo();
                }
                this.dialogVisible = false;
            });
        },
        //数据下载
        dataDown() {
            let self = this;
            self.$http
                .post(
                    `/tes/ranking/${this.courseId}/data-download`,
                    this.searchTxt,
                    {
                        responseType: "blob",
                    }
                )
                .then((response) => {
                    let contentType = response.headers["content-type"];
                    let blob = new Blob([response.data], {
                        type: response.headers["content-disposition"],
                    });
                    let url = window.URL.createObjectURL(blob);
                    //let fileName = response.headers['content-disposition'].split(";")[1].split("filename=")[1];
                    let fileName = `数据下载.xls`;
                    let downloadElement = document.createElement("a");
                    downloadElement.style.display = "none";
                    downloadElement.href = url;
                    downloadElement.download = fileName; //下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(url);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss">
#CompetitionRanking {
    .el-dialog {
        .el-dialog__body {
            .el-input__inner {
                width: 100%;
            }
        }
        .el-dialog__footer {
            padding: 0px 20px 10px;
        }
    }
    .filter-wraper {
        .input-wraper {
            margin-top: 20px;
            .el-input__inner {
                width: 100%;
            }
        }
    }
    .el-tooltip__popper {
        max-width: 30%;
        line-height: 22px;
    }
    .chapter-info-table .el-switch__core {
        width: 28px;
        height: 16px;
    }
    .chapter-info-table .el-switch {
        margin-left: 15px;
    }
    .chapter-info-table .el-switch.is-checked .el-switch__core::after {
        margin-left: -13px;
    }
    .chapter-info-table .el-switch__core:after {
        width: 12px;
        height: 12px;
    }

    //修改table样式
    .major-areas {
        .jx-content {
            // #el-table {
            //     tbody {
            //         td {
            //             padding: 0;
            //             div {
            //                 padding: 0;
            //                 .td-items {
            //                     border-bottom: 1px solid #ebeef5;
            //                     width: 100%;
            //                     line-height: 40px;
            //                 }
            //             }
            //         }
            //     }
            // }
        }
    }
    //调整分数弹框样式调整
    .el-dialog {
        width: 380px;
        height: 140px;
        .el-dialog__body {
            display: flex;
            justify-content: space-between;
            .el-input {
                width: 60%;
                .el-input__inner {
                    width: 80%;
                }
            }
            .yes-no {
                width: 40%;
            }
        }
    }
}
</style>
<style scoped>
.imgPost {
    vertical-align: inherit;
    position: absolute;
    right: 17px;
    color: rgb(2, 170, 255);
    font-size: 18px;
    padding-top: 5px;
}
.el-button--small:hover {
    color: #1277eb;
}
.el-tree >>> .el-tree-node {
    margin: 6px 0;
}
.el-form-item >>> .el-input__inner {
    width: 200px;
    height: 32px;
    border-radius: 4px;
}
.el-form >>> .el-textarea__inner {
    height: 200px;
    width: 350px;
    resize: none;
}
.el-form-item {
    margin-bottom: 22px;
}
.el-form-item >>> .el-form-item__content {
    height: auto;
}
.block::-webkit-scrollbar {
    width: 2px;
}
.block::-webkit-scrollbar-thumb {
    background: #dededd;
    border-radius: 50px;
}

.chapterTitle {
    width: 390px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}
.custom-tree-node {
    padding-top: 10px;
}
</style>
<style lang="scss" scoped>
@import "./../../../styles/ypublic.scss";
.jx-content {
    width: 1200px;
    margin: 20px auto;
    .major-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        .courseName {
            font-size: 18px;
            display: flex;
            align-items: center;
            .el-input {
                margin-right: 10px;
            }
            .txt {
                width: 94px;
                height: 32px;
            }
            .el-input {
                width: 150px;
            }
        }
    }

    .totalScore {
        margin-left: 30px;
        font-size: 15px;
    }
    #topic-models {
        padding: 200px 0;
        .button-center {
            text-align: center;
            .button-style {
                text-align: center;
                height: 48px;
                line-height: 48px;
                border-radius: 48px;
                padding: 0 106px;
                margin: 10px;
            }
        }
    }
    .navBox {
        .reportTemplate {
            padding-bottom: 10px;
            margin-left: 190px;
            cursor: pointer;
        }
        .testTemplate {
            padding-bottom: 10px;
            margin-left: 40px;
            cursor: pointer;
        }
        .templateCheck {
            border-bottom: 2px solid $yBlue;
            color: $yBlue;
            cursor: pointer;
        }
    }
    .block {
        margin: 20px 0;
        overflow-y: scroll;
        height: 483px;
    }
    .saveBtn {
        text-align: center;
        margin-top: 10px;
    }
    .search-button {
        border: 1px solid #1277eb;
        height: 32px;
        width: 94px;
        text-align: center;
        vertical-align: middle;
        line-height: 30px;
        color: #1277eb;
        cursor: pointer;
        border-radius: 20px;
        padding: 0 16px;
        font-size: 14px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0 15px 0 15px;
        &:hover {
            background-color: #1277eb;
            color: white;
        }
    }
}
.yes-no {
    display: flex;
    justify-content: space-around;
    .yes-no-button {
        border: 1px solid #1277eb;
        height: 32px;
        width: 64px;
        text-align: center;
        vertical-align: middle;
        line-height: 30px;
        color: #1277eb;
        cursor: pointer;
        border-radius: 20px;
        padding: 0 16px;
        font-size: 14px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        // margin: 0 15px 0 15px;
        &:hover {
            background-color: #1277eb;
            color: white;
        }
    }
}
</style>
